<template>
	<view class="route">
		<view class="inner">
			<view class="have" v-if="list.length">
				<view class="cloum" v-for="(item,index) in list" :key="index">
					<view class="left">
						<view class="name">
							<view class="">
								{{item.nickname}}
							</view>
							<view class="text">
								{{item.phone}}
							</view>
						</view>
						<view class="num">
							领取数量：{{item.num}}
						</view>
						<view class="num">
							领取时间：{{formatTime(item.addtime)}}
						</view>
					</view>
					<view class="">

					</view>
				</view>
				<u-loadmore :status="status" />
			</view>
			<view class="none" v-else>
				<u-empty mode="data">
				</u-empty>
			</view>
		</view>

	</view>
</template>

<script>
	import dayjs from 'dayjs'
	export default {
		data() {
			return {
				id: '',
				list: [],
				currentPage: 1,
				pageSize: 20,
				totalPage: 0,
				status: 'nomore'
			};
		},
		onLoad(options) {
			if (options.id) {
				this.id = Number(options.id)
				this.getData()
			}
		},
		onReachBottom() {

			this.loadData()
		},
		computed: {
			formatTime() {
				return function(val) {
					return dayjs.unix(val).format('YYYY-MM-DD HH:mm:ss')
				}
			}
		},
		methods: {
			getData() {
				this.currentPage = 1
				uni.showLoading({
					title: '加载中'
				})
				this.$req.post('/shanghu/couponlingqu', {
					shanghuid: uni.getStorageSync('userInfo').shanghuid,
					couponid: this.id,
					pageNo: this.currentPage,
					pageSize: 20
				}).then(res => {
					uni.hideLoading()
					let info = res.data
					this.list = info.data.data || []
					this.totalPage = info.data.totalPage
					if (this.totalPage <= this.currentPage) {
						this.status = 'nomore'
					}
				})
			},
			loadData() {
				if (this.currentPage >= this.totalPage) return;
				this.status = 'loading'
				this.currentPage = ++this.currentPage
				let req = {
					shanghuid: uni.getStorageSync('userInfo').shanghuid,
					couponid: this.id,
					pageNo: this.currentPage,
					pageSize: 20
				}
				uni.showLoading({
					title: '加载中'
				})
				this.$req.post('/shanghu/couponlingqu', req).then((res) => {
					uni.hideLoading()
					let info = res.data
					this.goodsList = [...this.list, ...info.data.data]

					if (this.currentPage >= this.totalPage) {
						this.status = 'nomore'
					}
				})

			}
		}
	}
</script>

<style lang="scss">
	.route {
		min-height: 100vh;
		background-color: #f5f5f5;
		font-size: 28rpx;

		.inner {
			padding: 30rpx 24rpx 30rpx 24rpx;

			.have {
				.cloum {
					display: flex;
					align-items: center;
					padding: 20rpx;
					border-radius: 12rpx;
					background-color: #fff;
					margin-bottom: 20rpx;

					.left {
						.name {
							display: flex;
							align-items: center;

							.text {
								padding-left: 10rpx;
							}
						}

						.num {
							margin-top: 20rpx;
						}
					}
				}
			}

			.none {
				padding-top: 10vh;
			}
		}

	}
</style>